<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta charset="UTF-8" />
    <title>Logon</title>
    <script type="text/javascript" src="../../../lib/js/require.js"></script>
    <script type="text/javascript" src="../../../lib/js/jquery.js"></script>
    <script type="text/javascript" src="../../../lib/js/validate_UI.js"></script>
    <script type="text/javascript" src="../../../lib/js/jq.js"></script>
    <script type="text/javascript" src="../../../lib/js/iscroll.js"></script>
    <script type="text/javascript" src="../../../lib/js/dove.js"></script>
    <script type="text/javascript" src="../../../lib/js/webtrends.js"></script>
    <script type="text/javascript" src="logon.js"></script>
    <!-- Link Roboto fonts from Google for local development,
         since Windows does not have these fonts installed.
         The below line should be removed / comment in PROD
    <link href="http://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet" type="text/css" /> -->
    <link href="../../../lib/css/uicsBase.css" rel="stylesheet" type="text/css" />
    <link href="../../../lib/css/uiGreenPacket.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- Home -->
    <div id="home" role="page" class="page bg-town town-left hidden">
        <div class="ui-logo-green-laisee"></div>
        <div id="swipeLogon" class="ui-swipe-logon">${nls.swipeActivate}</div>
    </div>

    <!-- Username -->
    <div id="logon" role="page" class="page bg-town town-right hidden">
        <div class="ui-panel-logon">
            <div class="ui-logo-activate">${nls.activate}</div>
            <div id="warningWrapper" class="ui-logon-error hidden"></div>
            <div id="logonInfo" class="ui-logon-info">${nls.logonInfo}</div>
            <div id="logon-inputs" class="ui-logon-inputs">
                <input id="username" class="ui-input-logon" type="text" placeholder="${nls.placeHolder_staffId}" maxlength="8" autocapitalize="off" autocomplete="off" />
                <!-- <input id="password" class="ui-input-logon" type="password" placeholder="${nls.placeHolder_mobile}" maxlength="11" autocapitalize="off" autocomplete="off" /> -->
                <input id="mobileNumber" class="ui-input-logon" type="text" placeholder="${nls.placeHolder_mobile}" maxlength="11" autocapitalize="off" autocomplete="off" />
            </div>
            <a id="btnGo" role="button" href="javascript:;" class="ui-btn-standard disabled">${nls.go}</a>
            <div class="ui-popup-item hidden"></div>
            <div class="ui-logon-info hidden">
                ${nls.to_registion_1}<a id="to_register" class="skyblue">${nls.register}</a>${nls.to_registion_2}
            </div>
        </div>
    </div>

    <!-- Registration -->
    <div id="registration" role="page" class="page bg-town town-right hidden">
        <div class="ui-panel-logon">
            <div class="ui-logo-register"></div>
            <div class="ui-logon-error hidden"></div>
            <div class="ui-logon-info">${nls.RegisterInfo}</div>
            <div id="register-inputs">
                <input id="staffId" class="ui-input-logon" type="text" placeholder="${nls.placeHolder_staffId}" maxlength="10" autocapitalize="off" autocomplete="off" />
                <input id="email" class="ui-input-logon" type="text" placeholder="${nls.placeHolder_email}" autocapitalize="off" autocomplete="off" />
                <div id="locationInput" class="ui-popup-item">
                    <div>
                        <input type="radio" name="location" value="${nls.cn}" /><label><span>${nls.lable_cn}</span></label>
                        <input type="radio" name="location" value="${nls.hk}" /><label><span>${nls.lable_hk}</span></label>
                    </div>
                </div>
            </div>
            <a id="btnRegister" role="button" href="javascript:;" class="ui-btn-standard disabled">${nls.go}</a>
            <div class="ui-popup-item"></div>
            <div class="instruction ui-logon-info">
                ${nls.to_logon_1}<a id="to_logon" class="skyblue">${nls.to_logon_2}</a>
            </div>
        </div>
    </div>

    <!-- Thank you -->
    <div id="thankyou" role="page" class="page ui-non-bgImg hidden">
        <div role="headbar" class="ui-header nav-back">
            <a id="back_to_home" role="button" href="javascript:;" class="nav-btn-back errorBtnBack"></a>
        </div>
        <div class="registerResultContent">
            <div class="register-tick">${nls.thankyou}</div>
            <div>
                <label><span class="ui-greenSpan font-size-20">${nls.register_confirmation_1}</span></label>
            </div>
            <div>
                <label><span class="ui-greySpan font-size-14">${nls.register_confirmation_2}</span></label>
            </div>
        </div>
    </div>
</body>
</html>